/**
 * Created with JetBrains PhpStorm.
 * User: power_yin
 * Date: 13-10-10
 * Time: 下午11:02
 * To change this template use File | Settings | File Templates.
 */
/**
 * @param : setting HashObject {
             *     wrapperSelector : 包裹容器 jquery 选择器
             *     autoPlay : 是否自动播放
             *     autoPlayInterval : 自动比播放时间间隔
             *     switchEventName : 自定义 切换的事件 名称
             *     toggleSwitchEventName : 自定义 发转的切换事件 名称
             *     startAt : 0 第一次启动的位置
             * }
 * @todo : 滚动暂时有 Css3 transition 属性来承担，暂未实现js，遵照平稳退化原则
 */
(function(xf, $){
    xf.SelectBrandTab = (function(){
        function SelectBrandTab(setting){
            this.wrapperSelector = setting.wrapperSelector;
            this.autoPlay = setting.autoPlay || false;
            this.autoPlayInterval = setting.autoPlayInterval || 2000;
            this.switchEventName = setting.switchEventName || 'mouseover';
            this.toggleSwitchEventName = setting.toggleSwitchEventName || 'mouseout';
            this.startAt = setting.startAt || 0;

            this.node2Stack = new XF.Node2Stack();

            this.timerId = 0;
            this._init(); //初始化
        }
        SelectBrandTab.prototype._init = function(){
            this.btnGroup = $(this.wrapperSelector + '>.select-btn-group');
            this.panelWrap = $(this.wrapperSelector + '>.select-content');

            this.panelWrap.children('.select-content-panel').each(function(index, panel){
                $(panel).css({ 'z-index' : 1000 - index });
            });

            this._switchOnEvent();  //注册鼠标事件切换
            //执行第一起切换
            this.switchTab( this.btnGroup.find('div.brand-btn>a.brand-logo:eq(' + this.startAt + ')')); //切换到第一个节点
            var that = this;

            if(this.autoPlay === true){ //当开启 自动播放时

                this.play(this.autoPlayInterval);
                // 品牌按钮 双向事件 代理
                this.btnGroup.delegate('div.brand-btn>a.brand-logo', this.switchEventName, function(){
                    window.clearInterval(that.timerId); //暂时关闭自动滚动
                }).delegate('div.brand-btn>a.brand-logo', this.toggleSwitchEventName, function(){
                        that.play();    //恢复滚动
                    });
                // 面板 双向事件 代理
                this.panelWrap.delegate('div.select-content-panel', this.switchEventName, function(){
                    window.clearInterval(that.timerId); //暂时关闭自动滚动
                }).delegate('div.select-content-panel', this.toggleSwitchEventName, function(){
                        that.play();    //恢复滚动
                    });
            }
        };
        /**
         * 切换到下一个 BrandTab
         */
        SelectBrandTab.prototype.nextTab = function(){
            var nextNode = this.node2Stack.current['brandTab'].node.parent('.brand-btn').next().children('a.brand-logo');
            if(nextNode.length === 0){  //当遍历到最后一个接节点时
                this.switchTab( this.btnGroup.find('div.brand-btn>a.brand-logo:eq(0)')); //切换到第一个节点
            }else{
                this.switchTab( nextNode ); //切换到下一个节点
            }

        };
        /**
         * 注册指定切换事件 代理
         */
        SelectBrandTab.prototype._switchOnEvent = function(){
            var that = this;
            this.btnGroup.delegate('div.brand-btn>a.brand-logo', this.switchEventName, function(){
                var currentTab = $(this);   //代理事件源
                that.switchTab( currentTab );
            });
        };
        /**
         * @param currentTab 核心 切换方法 唯一的切换接口
         */
        SelectBrandTab.prototype.switchTab = function(currentTab){
            var that = this;
            //1 切换 BrandTab
            //2 切换 Panel
            this.node2Stack.push({
                'contentPanel' : new SelectBrandTab.PanelNode( currentTab ),
                'brandTab' : new SelectBrandTab.BtnNode( currentTab )
            });

            //console.log(currentTab[0], currentTab.data('target-id'));

            currentTab.addClass('active');
            this.panelWrap.children( '#' + currentTab.data('target-id')).addClass('active');
            // 10 30 50 70 90
            this.panelWrap.find('.arrow').css({left: currentTab.data('target-percent') });
        };
        /**
         * 自动切换方法
         * @param timeout 播放时间间隔
         */
        SelectBrandTab.prototype.play = function(timeout){
            var autoPlayInterval = timeout || this.autoPlayInterval,
                that = this;
            this.autoPlayInterval = autoPlayInterval;   //更新间隔时间
            this.timerId = window.setInterval(function(){
                that.nextTab();
            }, autoPlayInterval);
        };
        return SelectBrandTab;
    })();
    /**
     * 选择按钮 节点对象
     */
    xf.SelectBrandTab.BtnNode = (function(){
        function BtnNode(node_jQ){
            this.node = node_jQ;
        }
        /**
         * 支撑 Node2Stack 的接口方法
         */
        BtnNode.prototype.resume = function(){
            this.node.removeClass('active');
        };
        return BtnNode;
    })();
    /**
     * 切换面板 节点对象
     */
    xf.SelectBrandTab.PanelNode = (function(){
        function PanelNode(node_jQ){
            this.node = $('.select-content').children( '#' + node_jQ.data('target-id'));
        }
        /**
         * 支撑 Node2Stack 的接口方法
         */
        PanelNode.prototype.resume = function(){
            this.node.removeClass('active');
        };
        return PanelNode;
    })();
})( XF || (XF = {}), jQuery );